<template>
 <div class="login-container">
  <div class="login-form-wrap">
    <div class="login-head">
      <div class="logo"></div>
    </div>
    <el-form class="login-form" :model="from" :rules="formRules" ref='formName'>
      <el-form-item  prop="mobile">
        <el-input
        v-model="from.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item  prop="code">
        <el-input
         v-model="from.code"
          placeholder="请输入验证码"
        ></el-input>
      </el-form-item>
      <el-form-item prop='checkFlag'>
        <el-checkbox v-model="from.checkFlag">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
        v-loading="loading" 
          class="login-btn"
          type="primary"  @click="submitForm()"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
import reqest from '@/utils/request'
import {userLogin} from '@/api/user'
export default {
  data () {
      //定义函数
      //value:当前表单绑定的值是什么
      //callback：一个可调用的函数 作为校验发生时的具体执行逻辑的回调函数
//-------------------code的定义
      const validatePass = (rule, value, callback) => {
      if (value === '') {
        console.log(1);
        callback(new Error('请输入验证码'))
      }
        callback()
    };
    //
    const validateCheck=(rule,value,callback)=>{
        if(value===false){
              callback(new Error('请勾选阅读用户协议'))
        }
        callback()
    }
    return {


      from: {
        mobile: '13911111111',
        code: '246810',
    //只有一个checkbox 绑定一个布尔值   
     //如果是多个 绑定一个数组
        checkFlag: false,
       
      },


      formRules:{
             mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          { max: 11, message: '长度不能超过11位', trigger: 'blur' }//事件
            ],
          code:[//支持数组形式
              {
              validator: validatePass, trigger: 'blur'
          }
          ],
           checkFlag: [
                   {
              validator: validateCheck, trigger: 'change'
          }
           ]

          
         
      },
       loading: false
    }
  },



  methods: { // 登录效果
    logins(){
        //--------------   判断协议 start----------//
      this.loading = true
      if (this.from.checkFlag === false) {
        this.$message({
          showClose: true,
          message: '请阅读协议',
          type: 'warning'
          
        }), 
        this.loading = false

        return
      }
  //--------------   判断协议 end----------//



  //--------------引用登录接口 start----------///
userLogin(this.from. mobile,this.from.code).then(res => {
    this.$message({
      type: 'success',
      message: '登录成功'
    })
    this.loading= false
  }).catch(err=>{
       this.$message({
      type: 'warning',
      message: '登录出错咯，检查一下输入的内容哦'
    })
    this.loadingFlag = false
  })
    
    //-------------引用登录接口end -----------///
    },


 //表单验证         start
 submitForm() {
        this.$refs['formName'].validate((valid) => {
          if (valid) {
           this.logins();
          } else {
            console.log('error submit!!');
            return false;
          }
        })
 }
 
        

 //表单验证      end
 
 

    }

   

}
</script>

<style lang="less">
// 铺满整屏
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background: url("./img/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color:#fff;
    .login-head {
      display: flex;
      justify-content: center;
      .logo {
        width: 200px;
        height: 57px;
        background: url("./img/logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
